<template>
  <!-- css 选择器   类选择器   .类名  ID选择器   #ID   标签选择器 标签 -->
  <div class="bigDiv blueBg"></div>

  <div class="smallDiv regBg"></div>

  <span id="notice">有电请注意</span>

  <p>床前明月光</p>
  <p class="boldFont">疑是地上霜</p>
  <p>举头望明月</p>
  <p>低头思故乡</p>

</template>

<script>
export default {
  name: "App8"
}
</script>
<!--
  至少需要掌握三个选择器

  类选择器   .类名
  ID选择器   #ID
  标签选择器  标签
-->
<style scoped>

.bigDiv{
  width: 300px;
  height: 300px;
}

.smallDiv{
  width: 150px;
  height: 150px;
}

.regBg{
  background-color: red;
}

.blueBg{
  background-color: blue;
}

#notice {
  font-weight: bold;
  color: red;
}

.boldFont{
  font-weight: bold;
}

p{
  color: #646cff;
}

</style>